<template>
  <div class="flex justify-center flex-col items-center text-[14px] py-20">
    <header class="flex flex-col items-center w-600">
      <el-avatar :size="100" :src="userInfo.avatar" />
      <div v-if="!isEdit" class="flex flex-col items-center w-full pt-20 pb-66">
        <div class="text-[18px] py-8">{{ userInfo.name }}</div>
        <p>
          {{ userInfo.intro || '这是一句话简介的位置，用户一句话说明自己' }}
        </p>
        <el-button @click="isEdit = true" link>修改资料</el-button>
      </div>
      <div v-else class="flex flex-col items-center w-full pt-20 pb-66">
        <el-row class="w-full" :gutter="10">
          <el-col :span="18">
            <el-input
              show-word-limit
              maxlength="10"
              class="mb-10"
              v-model="fromInput.name"
              placeholder="请输入昵称"
            ></el-input>
            <el-input
              show-word-limit
              maxlength="20"
              v-model="fromInput.intro"
              placeholder="请输入简介"
            ></el-input>
          </el-col>
          <el-col class="flex items-end" :span="6">
            <el-button @click="handleUpdateUserInfo" type="primary"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </div>
    </header>
    <el-card style="width: 600px">
      <div class="flex items-center">
        <div class="pr-20">
          <i class="iconfont icon-huafei"></i>
        </div>
        <div class="grow">
          <div>手机登录</div>
          <div>绑定手机号，账号更安全</div>
        </div>
        <div class="flex flex-col justify-center">
          <strong class="text-center">{{ userInfo.phone }}</strong>
          <el-button @click="showUpdatePhoneDialog = true" link
            >更换手机号</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card style="width: 600px" class="my-20">
      <div class="flex items-center justify-between">
        <div class="pr-20">
          <i class="iconfont icon-weixin"></i>
        </div>
        <div class="grow">
          <div>微信</div>
          <div>可使用微信快捷登录</div>
        </div>
        <div class="flex flex-col justify-center">
          <el-button link>更换绑定</el-button>
        </div>
      </div>
    </el-card>
    <!-- <el-card style="width: 600px">
      <div class="flex items-center justify-between">
        <div class="pr-20">
          <i class="iconfont icon-zhifubao"></i>
        </div>
        <div class="grow">
          <div>提现账号</div>
          <div>绑定支付宝账号进行收益提现</div>
        </div>
        <div class="flex flex-col justify-center">
          <div class="flex justify-center">
            <el-button type="primary">立即设置</el-button>
          </div>
        </div>
      </div>
    </el-card> -->
  </div>
  <!-- 更换手机号 -->
  <el-dialog
    class="changePhone-dialog"
    width="400"
    v-model="showUpdatePhoneDialog"
  >
    <div class="main">
      <div class="title">
        <h4 class="text-center font-bold text-[24px]">更换手机号</h4>
        <p class="pt-10 text-center pb-30">
          更换成功后，你可以使用新手机号登录
        </p>
      </div>
      <el-form :model="fromPhone">
        <el-form-item>
          <el-input
            size="large"
            placeholder="请输入手机号"
            v-model="fromPhone.phone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="flex justify-between w-full">
            <el-input
              size="large"
              placeholder="请输入验证码"
              v-model="fromPhone.code"
            >
            </el-input>
            <el-button class="ml-20" link>发送验证码</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            size="large"
            class="mt-20 w-200"
            style="margin: 0 auto"
            type="primary"
            @click="onSubmit"
            >确定更换</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
  <!-- 更换微信号 -->
  <el-dialog
    class="changePhone-dialog"
    width="400"
    v-model="showUpdateWechatDialog"
  >
    <div class="main">
      <div class="title">
        <h4 class="text-center font-bold text-[24px]">更换手机号</h4>
        <p class="pt-10 text-center pb-30">
          更换成功后，你可以使用新手机号登录
        </p>
      </div>
      <el-form :model="fromPhone">
        <el-form-item>
          <el-input
            size="large"
            placeholder="请输入手机号"
            v-model="fromPhone.phone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="flex justify-between w-full">
            <el-input
              size="large"
              placeholder="请输入验证码"
              v-model="fromPhone.code"
            >
            </el-input>
            <el-button class="ml-20" link>发送验证码</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            size="large"
            class="mt-20 w-200"
            style="margin: 0 auto"
            type="primary"
            @click="onSubmit"
            >确定更换</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/api/index.js'
const isEdit = ref(false)
const userInfo = ref({})
const showUpdatePhoneDialog = ref(false)
const showUpdateWechatDialog = ref(false)
const fromInput = ref({})
const fromPhone = ref({})

const saveUserInfo = () => {
  isEdit.value = false
}
onMounted(() => {
  handleGetUserInfo()
})
async function handleGetUserInfo() {
  let res = await api.getUserInfo()
  let { code, data } = res
  if (code == 200) {
    userInfo.value = data
    fromInput.value.name = data.name
    fromInput.value.intro = data.intro
  }
}
async function handleUpdateUserInfo() {
  let res = await api.updateUserInfo({
    name: fromInput.value.name,
    intro: fromInput.value.intro,
  })
  let { code, data, message } = res
  if (code == 200) {
    ElMessage.success(message)
    handleGetUserInfo()
    isEdit.value = false
  }
}
</script>

<style lang="scss" scoped>
.iconfont {
  font-size: 36px;
}
</style>
<style lang="scss">
.changePhone-dialog {
  border-radius: 20px;
  overflow: hidden;
  .el-dialog__body {
    padding: 0 30px !important;
  }
}
</style>
